<template>
  <div>
    <el-card class="content">
      <template #header>
        <span>流程发起</span>
      </template>
      <el-space wrap>
        <el-button
          v-for="(item, index) in entryList"
          :key="index"
          class="card--box"
          type="primary"
          @click="handleGo(item)"
          :disabled="item.disabled"
        >
          {{ item.name }}
        </el-button>
      </el-space>
    </el-card>
    <el-dialog
      :title="currentType.title"
      v-model="dialogVisible"
      destroy-on-close
      width="400px"
    >
      <div class="dialog__row">
        <el-button
          type="primary"
          @click="handleToOne(currentType.btns[0].btnCode)"
          >{{ currentType.btns[0].btnTitle }}</el-button
        >
      </div>
      <div class="dialog__row">
        <el-button
          type="primary"
          @click="handleToTwo(currentType.btns[1].btnCode)"
          >{{ currentType.btns[1].btnTitle }}</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { nextTick } from "process";
import { ref, reactive, onBeforeMount } from "vue";
import { useRouter } from "vue-router";
import { usePermissionStoreHook } from "/@/store/modules/permission";

const router = useRouter();
let dialogVisible = ref<boolean>(false);
let currentType = reactive({
  path: "",
  title: "",
  btns: []
});

let entryList = [
  {
    typeId: 1,
    name: "开工验收",
    path: "/acceptance/material/detail?mode=add&nodeDefId=ACT_010&source=work",
    disabled: false,
    authBtn: "/work/dashboard-material--add",
    title: "选择验收类型",
    btns: [
      {
        btnTitle: "开工审批",
        btnCode: "9"
      },
      { btnTitle: "材料审批", btnCode: "10" }
    ]
  },
  {
    typeId: 2,
    name: "竣工验收",
    path: "/acceptance/completed/detail?mode=add&nodeDefId=ACT_010&source=work",
    disabled: false,
    authBtn: "/work/dashboard-completed--add",
    title: "选择验收类型",
    btns: [
      {
        btnTitle: "涉及监理验收",
        btnCode: "7"
      },
      { btnTitle: "不涉及监理验收", btnCode: "8" }
    ]
  },
  {
    typeId: 3,
    name: "到货验收",
    path: "/acceptance/arrival/detail?mode=add&nodeDefId=ACT_010&source=work",
    disabled: false,
    authBtn: "/work/dashboard-arrival--add",
    title: "",
    btns: []
  },
  {
    typeId: 4,
    name: "隐蔽验收",
    path: "/acceptance/concealed/detail?mode=add&nodeDefId=ACT_010&source=work",
    disabled: false,
    authBtn: "/work/dashboard-concealed--add",
    title: "选择隐蔽验收类型",
    btns: [
      {
        btnTitle: "涉及监理验收",
        btnCode: "5"
      },
      { btnTitle: "不涉及监理验收", btnCode: "6" }
    ]
  },
  {
    typeId: 5,
    name: "质量检查",
    path: "/quality/inspection/detail?mode=add&nodeDefId=ACT_010&source=work",
    disabled: false,
    authBtn: "/work/dashboard-quality--add",
    title: "",
    btns: [
      {
        btnTitle: "施工类",
        btnCode: "11"
      },
      { btnTitle: "设备类", btnCode: "15" }
    ]
  }
];

const storeAuthHook = usePermissionStoreHook();

onBeforeMount(() => {
  const storeAuth = storeAuthHook.buttonAuth;
  const newentryList = entryList.map(item => {
    const hasAuth = (storeAuth && storeAuth.includes(item.authBtn)) ?? false;
    // TODO  暂时限制到货验收的处理
    if (hasAuth) {
      item.disabled = true;
    }
    return item;
  });
  nextTick(() => {
    entryList = newentryList;
  });
});

const handleGo = item => {
  // if (!item.path) return;
  currentType.title = item.title;
  currentType.path = item.path;
  currentType.btns = item.btns;
  if ([3].includes(item.typeId)) {
    router.push(item.path);
  } else {
    dialogVisible.value = true;
  }
};

const handleToOne = code => {
  const url = `${currentType.path}&flowMinType=${code}`;
  console.log(url, "url");
  router.push(url);
};

const handleToTwo = code => {
  const url = `${currentType.path}&flowMinType=${code}`;
  router.push(url);
};
</script>

<style lang="scss" scoped>
.content {
  .card--box {
    width: 80px;
    height: 80px;
    // line-height: 80px;
    // text-align: center;
    // font-size: 14px;
    // border-radius: 4px;
    // padding: 0;
    // box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    // background-color: rgba(120, 180, 255, 0.1);
    // color: black;
    &:hover {
      // background: #a5cff8;
      // cursor: pointer;
      user-select: none;
      transition: all 0.3s;
      -webkit-transition: all 0.3s; /* Safari */
    }
  }
}
.dialog__row {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
</style>
